<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>移除事件监听器</title>
        <style type="text/css">
            .wrapper { width: 200px ; height:  200px ; background: #dfdfdf; }
        </style>
    </head>
    <body>

        <div class="wrapper">马踏飞燕的故乡</div>
        <button type="button" class="remove-mouse-over">删除mouseover事件监听器</button>

        <script type="text/javascript">
            ( function(){
                const w = document.querySelector( '.wrapper' );

                const fn1 = function(event){
                    console.log( '1: 到' , event.target.innerHTML , '来了' );
                }

                w.addEventListener( 'mouseover' , fn1 , true );

                const fn2 = function(event){
                    console.log( '2: 到' , event.target.innerHTML , '来了' );
                }

                w.addEventListener( 'mouseover' , fn2 , true );

                w.addEventListener( 'mouseout' , function(event){
                    console.log( '从' , event.target.innerHTML , '走了' );
                } , true );

                const rmo = document.querySelector( '.remove-mouse-over' );

                rmo.addEventListener( 'click' , () => {
                    // 删除事件监听器时必须明确 监听器 和 该监听器绑定在哪个阶段(捕获、冒泡)
                    w.removeEventListener( 'mouseover' , fn1 , true );
                } , true );

            } )();
        </script>
        
    </body>
</html>